<template>
  <div class="login">
    <div class="container">
      <div class="title">入连人员信息采集</div>
      <div class="ctitle">RULIANRENYUANGUANKONGXITONG</div>
      <div class="content">
        <div class="icon">
          <img src="../assets/images/user.png" alt="">
          <span>用户名</span>
        </div>
        <div>
          <input v-model="username" type="text" placeholder="请输入用户名">
        </div>
        <div class="icon">
          <img src="../assets/images/password.png" alt="">
          <span>密码</span>
        </div>
        <div>
          <input v-model="password" type="password" placeholder="请输入密码">
        </div>
        <div class="flex">
          <input v-model="code" type="text" placeholder="请输入验证码">
          <img :src="image" alt="" @click="genVerifyCode">
        </div>
        <div>
          <van-button @click="login" type="primary" color="linear-gradient(to bottom, #285ee2, #1c4cbd)" block>登录
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userLoginMobile, genVerifyCode } from '@/api/gov/home'
import Cookies from 'js-cookie'
import CryptoJS from 'crypto-js'
import { Toast } from 'vant'
export default {
  name: 'login',
  data () {
    return {
      business_type: 'default',
      username: '',
      password: '',
      code: '',
      image: ''// 验证码图片
    }
  },
  created () {
    const key = localStorage.getItem('k')
    // token???
    // if (key) this.$router.push('/configuration')
    this.genVerifyCode() // 重新获取验证码
  },
  methods: {

    aesEncrypt (word) {
      let key = ''
      let keyStr = CryptoJS.enc.Utf8.parse('asd8a6218921h123')
      let iv = ''
      let ivStr = CryptoJS.enc.Utf8.parse('iv_login_p3XxcC8')
      // if (keyStr) {
      //   key = CryptoJS.enc.Utf8.parse(keyStr)
      // }

      // if (ivStr) {
      //   iv = CryptoJS.enc.Utf8.parse(ivStr)
      // }

      let srcs = CryptoJS.enc.Utf8.parse(word)
      var encrypted = CryptoJS.AES.encrypt(srcs, keyStr, {
        iv: ivStr,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
      })

      return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
    },
    generateUUID () {
      var d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now() // use high-precision timer if available
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0
        d = Math.floor(d / 16)
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
      })
      return uuid
    },
    // 获取cookie
    getCookie (cname) {
      var name = cname + '='
      var ca = document.cookie.split(';')
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i]
        console.log(c)
        while (c.charAt(0) == ' ') c = c.substring(1)
        if (c.indexOf(name) != -1) {
          return c.substring(name.length, c.length)
        }
      }
      return ''
    },
    async genVerifyCode () {
      // Cookies.set('loginValidateCodeCookie', this.generateUUID())
      // console.log(this.generateUUID())
      const res = await genVerifyCode()
      console.log(res, '验证码')
      this.image = res.data.data
    },
    login () {
      console.log(this.username, this.password)
      let pass = this.aesEncrypt(this.password)
      this.password = pass
      userLoginMobile({
        username: this.username,
        password: this.password,
        business_type: 'default',
        code: this.code,
        key: Cookies.get('loginValidateCodeCookie')
      }).then(res => {
        // this.genVerifyCode() // 重新获取验证码
        if (res.data.data.errcode == 0) {
          localStorage.setItem('username', this.username)
          localStorage.setItem('k', res.data.data.key)
          this.$router.push('/configuration')

          // if (this.username == 'LM40010' || this.username == 'L00021') {
          //   this.$router.push({ name: 'home2' })
          // } else if (this.username == 'LM40011' || this.username == 'L00022') {
          //   this.$router.push({ name: 'home3' })
          // }
        } else {
          this.password = null
          return Toast.fail(res.data.errmsg || res.data.data.errmsg)
        }
        // localStorage.setItem('k', res.data.data.role)
        // this.$router.push('/configuration')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login {
  font-weight: 500;
  background: url('../assets/images/bg.png')no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .flex {
    display: flex;
    align-items: center;

    img {
      height: 62px;
    }
  }

  .container {
    width: 100%;
  }

  .title {
    text-align: center;
    color: white;
    font-size: 60px;
    margin-bottom: 20px;
  }

  .ctitle {
    color: white;
    text-align: center;
    margin-bottom: 70px;
    font-size: 32px;
  }

  .content {
    margin: 0 40px;
    background: white;
    border-radius: 5px;
    padding: 80px 60px;

    input::-webkit-input-placeholder {
      color: #1c4cc8;
    }

    input:-moz-placeholder {
      color: #1c4cc8;
    }

    input::-moz-placeholder {
      color: #1c4cc8;
    }

    input:-ms-input-placeholder {
      color: #1c4cc8;
    }

    input {
      width: 100%;
      border: none;
      border-bottom: 1px solid #abbacc;
      margin: 40px 0;
      padding-bottom: 20px;
      font-size: 32px;
      color: #3b59b2;
      font-weight: 400;
    }

    .icon {
      display: flex;
      align-items: center;

      img {
        width: 32px;
        height: 32px;
      }

      span {
        margin-left: 12px;
        font-size: 32px;
        color: #1c4cc8;
      }
    }
  }
}
</style>
